<template>
	<div>
		<template v-if="imgList.length>0">
			<ul class="flex flex-wrap" v-if="!single" style="gap: 4px">
				<li v-for="(url, index) in imgList" :key="index" class="nav-item">
					<div class="nav-close" v-if="onDelete" @click="onDelete(item, index)">
						<icon-close-one theme="filled" size="20" fill="#106ef5" strokeLinejoin="miter" strokeLinecap="butt" />
					</div>
					<FilePreview :src="url" v-bind="$attrs" :baseStyle="{ width: imgSize + 'px', height: imgSize + 'px', borderRadius: '4px' }"></FilePreview>
				</li>
			</ul>
			<FilePreview v-else :src="imgList[0]"></FilePreview>
		</template>
		<template v-else> / </template>
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import FilePreview from './FilePreview.vue'

type Props = {
	value?: any
	item?: any
	single?: boolean
	imgSize?: string | number
	onDelete?: Function
}
const props = withDefaults(defineProps<Props>(), {
	single: false,
	imgSize: 84,
})
const imgList = ref([])
watch(()=>props.value,val=> {
  if (props.value) {
		imgList.value = Array.isArray(props.value) ? props.value : props.value.split(',')
	}else {
    imgList.value = []
  }
},{
  immediate:true
})

</script>

<style scoped lang="scss">
.nav-item {
	position: relative;
	z-index: 0;
	.nav-close {
		position: absolute;
		right: -4px;
		top: 18px;
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		background: #fff;
		border-radius: 50%;
		z-index: 1;
		cursor: pointer;
	}
}
</style>
